import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { useMeta } from '@/stores'

type PropsType = {
  title?: string
  leftContent?: React.ReactNode | string
  rightContent?: React.ReactNode | string
}

const Header = (props: PropsType) => {

  const {
    title,
    leftContent,
    rightContent,
  } = props

  const navigate = useNavigate()
  const { meta } = useMeta((state) => state)
  const showBackButton = meta.keywords !== 'menu-page' ? true : null

  const handleBack = () => {
    navigate(-1)
  }

  return <NavBar
    onBack={handleBack}
    back={showBackButton}
    left={leftContent}
    right={rightContent}>{title || meta.title}</NavBar>
}

export default Header
